<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Three.js</title>
    <script type="text/javascript" src="three.js"></script>
</head>

<body>
    <canvas id="mainCanvas" width="400px" height="300px"></canvas>
    <!-- <script>
        /**
         * init函数，在HTML加载完后执行
         */
        function init() {
            // 如果在html中手动定义了id为mainCanvas的Canvas元素，那么Renderer可以这样写
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById('mainCanvas')
            })

            // 如果想要Three.js生成Canvas元素，在html中就不需要定义canvas元素，在js代码中可以这样写
            /*  var renderer = new THREE.WebGLRenderer()
             renderer.setSize(400, 300)
             document.getElementsByTagName('body')[0].appendChild(renderer.domElement) */

            // 清除画面的颜色，设置背景色为黑色
            renderer.setClearColor(0x000000)

            // scene 
            var scene = new THREE.Scene()

            // camera
            var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000)
            camera.position.set(0, 0, 5)
            scene.add(camera)

            // a cube in the scene
            var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
                new THREE.MeshBasicMaterial({
                    color: 0xff0000
                })
            )
            scene.add(cube)

            // render
            renderer.render(scene, camera)

        }
        init()
    </script> -->

    <script>
        function init() {
            // renderer
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById('mainCanvas')
            })
            renderer.setClearColor(0x000000)

            // scene
            var scene = new THREE.Scene();

            // camera
            var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
            camera.position.set(0, 0, 5)
            scene.add(camera)

            var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
                new THREE.MeshBasicMaterial({
                    color: 0xff0000
                })
            )
            scene.add(cube)

            // render
            renderer.render(scene, camera)
        }

        init()
    </script>

</body>

</html>